import './TeacherPage.scss';
import { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import { Outlet } from 'react-router-dom';
import { DoubleLeftOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { setUserStatus } from '@/store/modules/user';

export default function TeacherPage() {
    const {user_status} = useSelector(state => state.user);
    const navigate = useNavigate();
    const dispatch = useDispatch();

    const menuList = [
        {
            label: '课程视频',
            path: '/teachercourse'
        },
        {
            label: '测验与作业',
            path: '/teachercourse/test'
        },
        {
            label: '班级管理',
            path: '/teachercourse/conditon'
        },
        {
            label: '测验总体情况',
            path: '/teachercourse/testcondition'
        }
    ]


    const items = [
        {
            label: <span>课程视频</span>,
            key: '1',
        },
        {
            label: <span>测验与作业</span>,
            key: '2',
        },
        {
            label: <span>班级管理</span>,
            key: '3',
        },
        {
            label: <span>测验总体情况</span>,
            key: '4',
        }
    ];

    function handleMenuClick(e) {
        dispatch(setUserStatus({
            ...user_status,
            menu_content:menuList[e.key - 1].label
        }))
        navigate(menuList[e.key - 1].path);
    }

    function handleBackClick() {
        navigate('/teacher');
    }

    return (
        <div className="TeacherPage">
            <nav>
                <button onClick={handleBackClick}> <DoubleLeftOutlined /> 返回</button>
                <header>
                    <h1>{user_status.classname}</h1>
                </header>
                <Dropdown
                    className='dropDownMenu'

                    menu={{
                        items,
                        onClick: handleMenuClick
                    }}
                >
                    <Space
                        style={{
                            cursor: 'pointer',
                        }}
                    >
                        {user_status.menu_content}
                        <DownOutlined />
                    </Space>
                </Dropdown>
            </nav>
            <Outlet />
        </div>
    )
}